<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的模板</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        #app {
            width: 800px;
            margin: 10px auto;
            text-align: center;
            padding: 10px;
        }
        
        #app>input {
            width: 400px;
            height: 36px;
            vertical-align: middle;
            padding-left: 20px;
            border: 2px solid skyblue;
            outline: none;
        }
        
        #app>button {
            outline: none;
            width: 100px;
            height: 40px;
            border: none;
        }
        
        #app>h1 {
            margin-bottom: 20px;
            color: dodgerblue;
        }
        
        #app>button:hover {
            border: 1px solid skyblue;
            border-left: none;
        }
        
        #app>ul {
            margin: 0 auto;
            margin-top: 40px;
            width: 700px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        #app>ul>li {
            list-style: none;
            width: 120px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>

<body>


    <div id="app">
        <h1>天气预告</h1>
        <input type="text" v-model="search"><button @click="clickButton(search)" v-bind:search="search">查询</button>
        <ul>
            <li style="color: orange;" v-for="day in dayList">
                <h1 style="margin-bottom: 20px;">{{day.type}}</h1>
                <span style="font-size: 10px;margin-bottom: 20px;display: inline-block;">{{day.low}}~{{day.high}}</span>
                <span style="color: darkgray;font-size: 15px;display: inline-block;">{{day.date}}</span>
            </li>
        </ul>
        <span>{{msg}}</span>
    </div>


</body>

</html>

<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    //api地址 http://wthrcdn.etouch.cn/weather_mini
    const app = new Vue({
        el: '#app',
        data: {
            dayList: [],
            msg: '',
            search: '',
        },
        methods: {
            clickButton(search) {
                var that = this;
                axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + search).then(
                    function(response) {
                        that.dayList = response.data.data.forecast;
                        that.msg = response.data.data.ganmao + '-' + response.data.data.city;
                    }
                )
                this.search = '';
            }
        },
        created() {
            var that = this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city=深圳').then(
                function(response) {
                    that.dayList = response.data.data.forecast;
                    that.msg = response.data.data.ganmao + '-' + response.data.data.city;
                    console.log(response.data.data);
                }
            )
        }
    })
</script>